<template>
  <div id="app">
    <transition :enter-active-class="animates">
      <router-view />
    </transition>

    <div class="foot" v-if="$route.meta.isshow">
      <router-link to="/" class="box" exact>
        <img src="@/assets/images/icons/home.png" alt />
        <img src="@/assets/images/icons/home-on.png" alt />
      </router-link>
      <router-link to="/movie" class="box" >
        <img src="@/assets/images/icons/movie.png" alt />
        <img src="@/assets/images/icons/movie-on.png" alt />
      </router-link>
      <transition :enter-active-class="animates">
        <router-link to="/ticket" class="box on" exact :class="animates" @click="add">
          <img src="@/assets/images/icons/ticket.png" alt @click="add" />
          <img src="@/assets/images/icons/ticket.png" alt @click="add" />
        </router-link>
      </transition>
      <router-link to="/cinema" class="box" exact>
        <img src="@/assets/images/icons/cinema.png" alt />
        <img src="@/assets/images/icons/cinema-on.png" alt />
      </router-link>
      <router-link to="/user" class="box" exact>
        <img src="@/assets/images/icons/user.png" alt />
        <img src="@/assets/images/icons/user-on.png" alt />
      </router-link>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  watch: {
    $route: function(to, from) {
      var topath = to.path.split("/").length;
      var frompath = from.path.split("/").length;
      if (topath > frompath) {
        this.animates = "flipInY animated";
      } else if (topath < frompath) {
        this.animates = "fadeIn animated";
      } else {
        this.animates = "fadeIn animated";
      }
    }
  },
  computed: {
    // ...mapState({
    //   paths: " paths"
    // })
  },
  data() {
    return {
      animates: "",
      paths: "/movie/hot",
      list: [
        {
          path: "/",
          img: require("@/assets/images/icons/home.png"),
          imgOn: require("@/assets/images/icons/home-on.png"),
          class: ""
        },
        {
          path: "/movie",
          img: require("@/assets/images/icons/movie.png"),
          imgOn: require("@/assets/images/icons/movie-on.png"),
          class: ""
        },
        {
          path: "/ticket",
          img: require("@/assets/images/icons/ticket.png"),
          imgOn: require("@/assets/images/icons/ticket.png"),
          class: "on"
        },
        {
          path: "/cinema",
          img: require("@/assets/images/icons/cinema.png"),
          imgOn: require("@/assets/images/icons/cinema-on.png"),
          class: ""
        },
        {
          path: "/user",
          img: require("@/assets/images/icons/user.png"),
          imgOn: require("@/assets/images/icons/user-on.png"),
          class: ""
        }
      ],
      animates: "",
      save: ""
    };
  },
  created() {
    // if (this.paths == undefined) {
    //   this.paths='/movie/hot'
    // }
  },
  updated() {},
  methods: {
    add() {
      if (!this.save) {
        this.animates = "animated rubberBand";
        this.save = setTimeout(() => {
          this.animates = "animated";
          this.save = null;
        }, 500);
      }
    }
  }
};
</script>
<style lang="scss">
body {
  background-color: #23262d;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
<style lang="scss" scoped>
.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: url(~@/assets/images/icons/movie-bg.png) no-repeat center;
  background-size: 375px 99px;
  .box {
    height: 72px;
    display: flex;
    align-items: flex-end;
    img:nth-child(2) {
      display: none;
    }
  }
  .active {
    img:nth-child(1) {
      display: none;
    }
    img:nth-child(2) {
      display: block;
    }
  }
  .on {
    align-items: flex-start;
    img {
      height: 72px;
      width: 72px;
    }
  }
  img {
    height: 47px;
    width: 49px;
  }
}
</style>
